<template>
  <view class="evidence-container">
	  <view class="topVue">
	  	<view class="status"></view>
	  	<view class="navVue">
	  
			<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
	
	  		<view class="nav-title">区块链交易哈希</view>
	  		<view style="width: 36rpx; height: 36rpx;"></view>	
	  	</view>
	  </view>
	  
	  <view class="place"></view>
	  
	  <view style="padding: 30rpx;">
			<u--form
			  labelPosition="top"
			  labelWidth="auto"
			  :model="form"
			  :rules="rules"
			  ref="uForm"
			>
			  <u-form-item :label="$t('区块链交易哈希')" prop="id">
			    <u--input
			      v-model="form.id"
			      border="bottom"
			      :placeholder="$t('请粘贴区块链交易哈希')"
			      placeholderStyle="{color: #999999}"
			    ></u--input>
			  </u-form-item>
			  <u-form-item :label="$t('充值数量')" prop="amount">
			    <u--input
			      v-model="form.amount"
			      type="number"
			      border="bottom"
			      :placeholder="$t('请输入充值数量')"
			      placeholderStyle="{color: #999999}"
			    ></u--input>
			  </u-form-item>
			  <!--      <u-form-item label="上传图片">-->
			  <!--        <u-upload width="248rpx" height="269rpx" uploadIconColor="#343547" multiple :fileList="fileList"-->
			  <!--                  :maxCount="1" @afterRead="afterRead"-->
			  <!--                  @delete="deletePic"></u-upload>-->
			  <!--      </u-form-item>-->
			</u--form>
	  </view>
    

    <u-button
      type="primary"
      :text="$t('提交')"
      @click="submit"
      class="submit-btn"
    ></u-button>

    <!-- <u-button
      type="primary"
      :text="$t('提交')"
      @tap="submint"
      class="submit-btn"
    ></u-button> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: "",
        amount: "",
      },
      // rules: {
      // id: {
      //   required: true,
      //   message: this.$t("请输入区块链交易ID"),
      //   trigger: ["blur", "change"],
      // },
      // amount: [{
      //     required: true,
      //     message: this.$t("请输入充值数量"),
      //     trigger: ["blur", "change"],
      //   },
      //   {
      //     validator: (rule, value, callback) => {
      //       return value > 0;
      //     },
      //     message: this.$t("充值数量不能小于1"),
      //     trigger: ["change", "blur"],
      //   },
      // ],
      // },
      fileList: [],
      addressId: null,
      amount: 0,
      formData: {},
    };
  },
  computed: {
    rules() {
      return {
        id: {
          required: true,
          message: this.$t("请输入区块链交易ID"),
          trigger: ["blur", "change"],
        },
        amount: [
          {
            required: true,
            message: this.$t("请输入充值数量"),
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              return value > 0;
            },
            message: this.$t("充值数量不能小于1"),
            trigger: ["change", "blur"],
          },
        ],
      };
    },
  },
  methods: {
	  backFun(){
	  	uni.navigateBack({
	  		delta: 1
	  	})
	  },
    submit() {
		
		
		
      // event.stopPropagation();
      // this.$refs.uForm
      //   .validate()
      //   .then((res) => {
          // this.formData["addressId"] = this.addressId;
          // this.formData["amount"] = this.form.amount;
          // this.formData["hash"] = this.form.id;
          this.$http1.post(`/front/assets/recharge`, {
              addressId: this.addressId,
			  amount: this.form.amount,
			  hash:  this.form.id
            })
            .then((res) => {
              console.log(res, 333);
              if (res.code == 0) {
                uni.$u.toast(this.$t("提交成功"));
              }
            })
            .catch((err) => {
              console.error(err);
							uni.navigateBack();
            });
          // uni.navigateTo({
          // 	url: `/pages/finance/evidence`
          // })
       
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      this.formData["file"] = event.file[0];
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          // status: 'uploading',
          // message: '上传中'
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(file, lists, name) {
      console.log(file, lists, name);
      // this.formData=new FormData();
      // this.formData['file'] = file;
    },
  },
  onLoad(options) {
    this.amount = options.amount;
    this.form.amount = options.amount;
    this.addressId = options.addressId;
  },
};
</script>

<style lang="scss" scoped>
.evidence-container {
  width: 100%;
  height: 100%;
  background: url("../../static/imgs/bg.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: fixed;
  .place {
  	height: calc(var(--status-bar-height) + 92rpx);
  }
  
  .topVue {
  	width: 100%;
  	position: absolute;
  	left: 0;
  	top: 0;
  	z-index: 99;
  	.status {
  		width: 100%;
  		height: var(--status-bar-height);
  	}
  	.navVue {
  		width: 100%;
  		height: 92rpx;
  		background: linear-gradient(to right, #FFFBFF, #FFE7F4);
  		display: flex;
  		justify-content: space-between;
  		align-items: center;
  		box-sizing: border-box;
  		padding: 0 30rpx;
  		.nav-title {
  			width: 420rpx;
  			height: 92rpx;
  			font-size: 36rpx;
  			color: #04094C;
  			text-align: center;
  			line-height: 92rpx;
  		}
  	}
  }

  /deep/ .u-form-item__body__left__content__label,
  /deep/ .u-input__content__field-wrapper__field {
	width: 690rpx !important;
    color: #333 !important;
  }

  /deep/ .u-input {
    height: 100rpx;
    padding: 0 !important;
    // border: none !important;
    border-bottom-color: #eee !important;
    border-radius: 0;
  }

  /deep/ .u-button {
	  width: 690rpx;
    height: 90rpx;
    margin-top: 100rpx;
    background: #D55B94;
    border-radius: 20rpx;
  }

  .u-upload {
    margin-top: 70rpx;
  }

  /deep/ .u-upload__button {
    background: #1d1f31;
    border-radius: 10rpx;

    .u-icon__icon {
      font-size: 72rpx !important;
    }
  }
  .submit-btn {
    position: relative;
    z-index: 99999;
  }
}
</style>
